<template>
  <div>
    <div class="title">
        <auth-title @sendBack="$router.back()" text="我的跟帖"></auth-title>
    </div>
    <ul>
      <li>
        <span>2019-10-10<i>10:25</i></span>
        <p>啊信是张信哲吗？张信哲是不是的张学友弟弟？</p>
        <div class="content">
          <p>原文：阿信分享《说好不哭》幕后故事：只听阿信分享《说好不哭》幕后故事：只听阿信分享《说好不哭》幕后故事：只听</p>
          <img src="@/assets/img/u227.png" alt="">
        </div>
      </li>
      <li v-for="(item, index) in listArray" :key="index">
        <span>2019-10-10<i>10:25</i></span>
        <div class="huifu" v-if="item.parent">
          <i>回复：</i> <span>{{item.parent.user.nickname}}</span>
          <p>啊信是张信哲吗？张信哲是不是的张学友弟弟？</p>
        </div>
        <p>{{item.content}}</p>
        <div class="content">
          <p>原文：阿信分享《说好不哭》幕后故事：只听阿信分享《说好不哭》幕后故事：只听阿信分享《说好不哭》幕后故事：只听</p>
          <img src="@/assets/img/u227.png" alt="">
        </div>
      </li>
    </ul>
    <div class="bottom">
      <span>更多跟帖</span>
      <img src="@/assets/img/u227.png" alt="">
      <img src="@/assets/img/u227.png" alt="">
    </div>
  </div>

</template>

<script>
  import authTitle from '@/commonComponent/authTitle.vue'
  import commentApi from '@/api/mycomment'

  export default {
    data() {
      return {
        listArray: []
      }
    },
    created () {
      this.getListData()
    },
    methods: {
      getListData(){
        let id = localStorage.getItem('user_id')
        commentApi.getCommentData(id).then(res => {
          let resp = res.data
          console.log(resp);
          this.listArray = resp.data
        })
      }
    },
    components: {
      authTitle
    }
  }
</script>

<style scoped>
  ul {
    margin-top: 8vw;
  }

  li {
    border-bottom: 0.133vw solid #d7d7d7;
    padding: 5vw 5vw 0 5vw;
    color: #b6a1ab;

  }

  li>span>i {
    padding-left: 4vw;
  }

  li>p {
    padding: 4.8vw 0;
    color: #202020;
  }

  .content {
    display: flex;
    justify-content: space-between;
    padding-bottom: 4vw;
  }

  .content p {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content img {
    width: 5vw;
    margin-right: -2vw;
  }

  .huifu {
    width: 100%;
    background-color: #e4e4e4;
    padding: 3vw 2vw;
    line-height: 7vw;
    margin-top: 4vw;
    font-size: 3.6vw;
  }
  .bottom{
    text-align: center;
    margin-top: 10vw;
    margin-bottom: 10vw;
  }
  .bottom img{
    width: 4vw;
  }

  .bottom img:nth-child(3){
    position: absolute;
    right: 38vw;
  }
</style>
